<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getTaskDetailsListAPI } from '@/api/task'
import { ref } from 'vue'
// 获取地址参数
onLoad((params) => {
  // console.log(params.id)
  if (params.id) getTaskDetailsList(params.id)
})
//任务详情数据
const taskDetailsList = ref([])
//获取任务详情
const getTaskDetailsList = async (id) => {
  const { data } = await getTaskDetailsListAPI(id)
  taskDetailsList.value = data
}



</script>

<template>
  <view class="page-container">
    <view class="search-bar">
      <!-- #ifdef H5 -->
      <text class="iconfont icon-search"></text>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS | MP -->
      <text class="iconfont icon-scan"></text>
      <!-- #endif -->
      <input class="input" type="text" placeholder="输入运单号" />
    </view>
    <scroll-view scroll-y class="task-detail">
      <view class="scroll-view-wrapper">
        <view class="basic-info panel">
          <view class="panel-title">基本信息</view>
          <view class="timeline">
            <view class="line">{{ taskDetailsList.startAddress }}</view>
            <view class="line">{{ taskDetailsList.endAddress }}</view>
            <navigator hover-class="none" url="/subpkg_task/guide/index" class="guide">
              <text class="iconfont icon-guide"></text>
              <text>开始导航</text>
            </navigator>
          </view>
          <view class="info-list">
            <!-- 待提货展示数据 -->
            <template v-if="taskDetailsList.status === 1">
              <view class="info-list-item">
                <text class="label">任务编号</text>
                <text class="value">{{ taskDetailsList.transportTaskId }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">提货联系人</text>
                <text class="value">{{ taskDetailsList.startHandoverName }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">联系电话</text>
                <text class="value">{{ taskDetailsList.startHandoverPhone }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">预计提货时间</text>
                <text class="value">{{ taskDetailsList.planDepartureTime }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">实际提货时间</text>
                <text class="value">{{ taskDetailsList.planArrivalTime }}</text>
              </view>
            </template>
            <!-- 在途展示数据 -->
            <template v-if="taskDetailsList.status === 2">
              <view class="info-list-item">
                <text class="label">交付联系人</text>
                <text class="value">{{ taskDetailsList.finishHandoverName }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">联系电话</text>
                <text class="value">{{ taskDetailsList.finishHandoverPhone }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">预计送达时间</text>
                <text class="value">{{ taskDetailsList.planArrivalTime }}</text>
              </view>
              <view class="info-list-item">
                <text class="label">实际送达时间</text>
                <text class="value">{{ taskDetailsList.planArrivalTime }}</text>
              </view>
            </template>
          </view>
        </view>

        <view v-if="taskDetailsList.exceptionList?.length" class="except-info panel">
          <view class="panel-title">异常信息</view>
          <view class="info-list" v-for="exception in taskDetailsList.exceptionList" :key="exception.exceptionType">
            <view class="info-list-item">
              <text class="label">上报时间</text>
              <text class="value">{{ exception.exceptionTime }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">异常类型</text>
              <text class="value">{{ exception.exceptionType }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">处理结果</text>
              <text class="value">{{ exception.handleResult }}</text>
            </view>
          </view>

        </view>

        <view class="panel pickup-info" v-if="taskDetailsList.status >= 2">
          <view class="panel-title">提货信息</view>
          <view class="label">提货凭证</view>
          <view class="pictures">
            <image class="picture" v-for="receipt in taskDetailsList.cargoPictureList" :key="receipt.url" :src="receipt.url" mode=""></image>
            
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <image class="picture"  v-for="goods in taskDetailsList.cargoPickUpPictureList" :key="goods.url" :src="goods.url" mode=""></image>
          </view>
        </view>

        <view class="delivery-info panel" v-if="taskDetailsList.status === 4 || taskDetailsList.status === 6">
          <view class="panel-title">交货信息</view>
          <view class="label">交货凭证</view>
          <view class="pictures">
            <image
              v-for="certificate in taskDetailsList.certificatePictureList"
              :key="certificate.url"
              class="picture"
              :src="certificate.url"
            ></image>
            <view v-if="false" class="picture-blank">暂无图片</view>
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <image
              v-for="delivery in taskDetailsList.deliverPictureList"
              :key="delivery.url"
              class="picture"
              :src="delivery.url"
            ></image>
            <view v-if="false" class="picture-blank">暂无图片</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="toolbar" v-if="true">
      <navigator :url="`/subpkg_task/delay/index?id=${taskDetailsList.id}&planDepartureTime=${taskDetailsList.planDepartureTime}`" hover-class="none" class="button secondary">
        延迟提货</navigator>
      <navigator :url="`/subpkg_task/pickup/index?id=${taskDetailsList.id}`" hover-class="none" class="button primary">提货
      </navigator>
    </view>
    <view class="toolbar" v-if="taskDetailsList.status === 2">
      <navigator :url="`/subpkg_task/except/index?id=${taskDetailsList.transportTaskId}`" hover-class="none"
        class="button secondary">异常上报
      </navigator>
      <navigator :url="`/subpkg_task/delivery/index?id=${taskDetailsList.id}`" hover-class="none" class="button primary">
        支付</navigator>
    </view>
    <view class="toolbar" v-if="taskDetailsList.status === 4">
      <navigator :url="`/subpkg_task/record/index?transportTaskId=${taskDetailsList.transportTaskId}`" hover-class="none"
        class="button primary block">回车登记</navigator>
    </view>
  </view>
</template>

<style lang="scss" scoped>@import './index.scss';</style>
